<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>手动设置单点模式点位</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/plugin/layui/css/layui.css}" media="all">
    <style type="text/css">

    </style>
</head>
<body>
<!---->
<div style="margin: 5px;">
    <!--设置单点模式手动点位-->
    <div class="layui-row" id="singleSetPointForm">
        <div class="layui-col-md10">
            <form class="layui-form layui-from-pane" action="" style="margin-top:20px; margin-right: 20px">
                <!--主键id-->
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style='color: red;'>*</span> 纬度类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="latitudeType" lay-filter="latitudeType"
                               checked value="N" title="北纬">
                        <input type="radio" name="latitudeType" lay-filter="latitudeType"
                               value="S" title="南纬">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style='color: red;'>*</span> 纬度</label>
                    <div class="layui-input-block">
                        <input type="text" id="latitudeDegree" name="latitudeDegree" required lay-verify="required"
                               autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                        <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                        <input type="text" id="latitudeMinute" name="latitudeMinute"
                               autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                        <div style="float:left;line-height: 38px;">&nbsp;分</div>
                        <div style="float:left;line-height: 38px;">（范围: 0-90度(整数), 0-60分(最多5位小数),1度=60分）</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style='color: red;'>*</span> 经度类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="longitudeType" lay-filter="longitudeType"
                               checked value="E" title="东经">
                        <input type="radio" name="longitudeType" lay-filter="longitudeType"
                               value="W" title="西经">
                    </div>
                </div>
                <div class="layui-form-item" style="float:left;">
                    <label class="layui-form-label" style="float:left;">
                        <span style='color: red;'>*</span> 经度
                    </label>
                    <div class="layui-input-block">
                        <input type="text" id="longitudeDegree" name="longitudeDegree" required lay-verify="required"
                               autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                        <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                        <input type="text" id="longitudeMinute" name="longitudeMinute"
                               autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                        <div style="float:left;line-height: 38px;">&nbsp;分</div>
                        <div style="float:left;line-height: 38px;">（范围: 0-180度(整数), 0-60分(最多5位小数),1度=60分）</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">速度</label>
                    <div class="layui-input-block">
                        <input type="text" id="speed" name="speed" required
                               autocomplete="off"
                               placeholder="单位节，1节=1海里/小时=1.852公里/小时=1.852千米/小时" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style='color: red;'>*</span> 航向（值为0到359.9）</label>
                    <div class="layui-input-block">
                        <input type="text" id="course" name="course" required
                               autocomplete="off"
                               placeholder="方向角，值为0-359.9" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top:40px">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn  layui-btn-submit " lay-submit=""
                                lay-filter="singleSetPointConfirm">确定
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary" id="back">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">
<input type="hidden" th:value="${singlePointByHand}" id="singlePointByHand">
<input type="hidden" th:value="${commonCourse}" id="commonCourse">

<script th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/static/plugin/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/app.js}" charset="utf-8"></script>
<script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>

<!--序号自增-->
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script>
    layui.use(['jquery', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        // 上一次的单点点位
        var singlePointByHand = $('#singlePointByHand').val();
        var commonCourse = $('#commonCourse').val();
        // 回显表格
        if (typeof singlePointByHand !== 'undefined' && !isBlank(singlePointByHand)) {
            setRouteFormValue(JSON.parse(singlePointByHand), commonCourse);
        } else {
            setRouteFormValue(null, commonCourse);
        }

        /**
         * 填充form（添加/修改航线的方法）
         *
         * @param data 数据
         * @param commonCourse 方向角
         */
        function setRouteFormValue(data, commonCourse) {
            // 先清空数据
            if (data != null) {
                if (!isBlank(data.longitudeType)) {
                    radioChecked("longitudeType", data.longitudeType);
                }
                if (!isBlank(data.latitudeType)) {
                    radioChecked("latitudeType", data.latitudeType);
                }
                $("#speed").val(data.speed);
                // 先置空
                $('#longitudeDegree').val('');
                $('#longitudeMinute').val('');
                $('#latitudeDegree').val('');
                $('#latitudeMinute').val('');
                // 经度回显成度数+分数
                echoDegreeValue(data.longitude, "longitudeDegree", "longitudeMinute");
                // 纬度回显成度数+分数
                echoDegreeValue(data.latitude, "latitudeDegree", "latitudeMinute");
                // 编辑的话是不带上一个点的id的
                $('#preId').val(null);
            } else {
                $("#longitudeDegree").val('');
                $("#longitudeMinute").val('');
                $("#latitudeDegree").val('');
                $("#latitudeMinute").val('');
                $("#speed").val('');
                // 新增的时候，默认选中东经，北纬
                $("#longitudeType").val('E');
                $("#latitudeType").val('N');
            }
            $('#course').val(commonCourse);
            layui.form.render();
        }

        /**点击确定按钮*/
        form.on('submit(singleSetPointConfirm)', function (massage) {
            // 经度的度
            var longitudeDegree = $('#longitudeDegree').val();
            var longitudeMinute = $('#longitudeMinute').val();
            var latitudeDegree = $('#latitudeDegree').val();
            var latitudeMinute = $('#latitudeMinute').val();
            if (!checkLongitudeDegreeFormat(longitudeDegree, longitudeMinute)) {
                return;
            }
            if (!checkLatitudeDegreeFormat(latitudeDegree, latitudeMinute)) {
                return;
            }
            // 经度
            var longitude = longitudeDegree + "°";
            if (!isBlank(longitudeMinute)) {
                longitude = longitude + longitudeMinute + "'";
            }
            // 纬度
            var latitude = latitudeDegree + "°";
            if (!isBlank(latitudeMinute)) {
                latitude = latitude + latitudeMinute + "'";
            }
            // 给对象添加新字段
            massage.field.longitude = longitude;
            massage.field.latitude = latitude;

            $.ajax({
                url: ctx + '/navigation/setSinglePointByHand',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(massage.field),
                beforeSend: function () {
                    this.layerIndex = showLoad();
                },
                complete: function () {
                    closeLoad(this.layerIndex);
                },
                success: function (data) {
                    if (data.result.code == 200) {
                        // 操作成功
                        layer.msg("操作成功");
                        // 延迟关闭
                        setTimeout(function () {
                            // 关闭所有弹窗
                            parent.layer.closeAll();
                            // 重新加载父窗口
                            window.parent.location.reload();
                        }, 330);
                    } else {
                        layer.msg(data.result.message);
                    }
                },
                error: function (result) {
                    layer.msg("请求失败！");
                }
            });
            return false;
        });

        // 取消按钮
        $("#back").on('click', function () {
            parent.layer.closeAll();
        });

    });
</script>

</body>
</html>